<script setup>
import {onMounted, ref, watch} from "vue";
import {getItem, getItemList} from "@/apis/item.js";
import {getOrderStore} from "@/stores/getOrderStore.js";

import {Delete} from '@element-plus/icons-vue'
import {deleteOrderById} from "@/apis/order.js";
import {storeToRefs} from "pinia";
import {info} from "@/apis/user.js";


const getUser = async (username) =>{
  await info(username).then(response => {
     pageData.value.searchAndOrder.search.customerId = response.data.id;

  })
  await updateOrderList();
}

// 定义删除方式 element-plus
const deleteRow = (scope) => {
  deleteOrderById(scope.row.id).then((res) => {
    // 刷新页面
    updateOrderList();
  })
};
// 定义分页数据pageData


const pageData = ref({
  page: 1,
  pageSize: 10,
  searchAndOrder: {
    search: {
      customerId:null,

    }
  },
})


const {fetchOrderList} = getOrderStore()
let orderListData = ref([])
//通过sessionStorage获取当前用户 parameter username


onMounted(   () => {
  const authDataStr = sessionStorage.getItem('Authentication');
  if (authDataStr) {
    const authData = JSON.parse(authDataStr);
    const username = authData.username;
    getUser(username)

  }
  updateOrderList();


})
// 定义更新订单列表的函数
const updateOrderList = async () => {
  // 页面加载时，获取订单列表
  await fetchOrderList(pageData.value.page, pageData.value.pageSize, pageData.value.searchAndOrder)
  const {orderList} = storeToRefs(getOrderStore())
  orderListData.value = orderList.value
  tableData.value = orderListData.value
  console.log("orderListData", orderListData.value)
  // 要保证存在order才进行循环
  if (tableData.value !== undefined && tableData.value.length > 0) {
    for (let i = 0; i < tableData.value.length; i++) {
      await formatItemName(tableData.value[i]); // 等待每次异步请求完成
      console.log("Updated item name:", tableData.value[i].itemName);
    }
  } else {

    console.log("No data to update")
  }

};


// tableData 实际传入的数据
const tableData = ref([
  {
    itemId: '15',
    itemValue: '',
    paymentType: '支付宝',
    comment: '无',
    status: 0,
    // itemName: '',

  },
]);
// 定义itemName的转化函数
const formatItemName = async (row) => {
  try {

    await getItem(row.itemId).then(
        response => {

          row.itemName = response.data.itemName;  // 更新 row 的 itemName
        }
    ); // 等待异步请求完成


  } catch (error) {
    console.error("Error fetching item:", error);
    throw error;
  }
};


// 定义状态的转化函数
const formatStatus = (row) => {
  if (row.status === 0) {
    return '待检测';
  } else if (row.status === 1) {
    return '检测中';
  } else {
    return '检测完成';
  }
};
// 定义收款的方式状态的转化函数
const formatPaymentType = (row) => {
  if (row.paymentType === 0) {
    return '微信收款';
  } else if (row.paymentType === 1) {
    return '支付宝收款';
  } else
    return '其他收款方式';
}
</script>

<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <div class="wrapper">
        <!-- 订单信息 -->
        <h3 class="box-title">球鞋信息</h3>
        <div class="box-body">
          <el-table :data="tableData" style="width: 100%">
            <!-- 球鞋信息显示球鞋的名字，但实际传入的是 item_id，这里需要做一个转换 -->
            <el-table-column prop="itemId" label="球鞋信息" width="180">
              <template #default="{ row }">
                {{ row.itemName || '加载中...' }}
              </template>
            </el-table-column>
            <el-table-column prop="itemValue" label="球鞋估值" width="180"/>
            <el-table-column prop="paymentType" label="收款方式">
              <template #default="{ row }">
                {{ formatPaymentType(row) }}
              </template>
            </el-table-column>
            <el-table-column prop="comment" label="检测报告"/>
            <el-table-column prop="status" label="状态">
              <template #default="{ row }">
                {{ formatStatus(row) }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">

              <template #default="scope" >
                <el-button
                    link
                    type="primary"
                    size="small"
                    @click.prevent="deleteRow(scope)"
                    :icon="Delete"
                >

                </el-button>
              </template>




            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped lang="scss">
.xtx-pay-checkout-page {
  margin-top: 20px;

  .wrapper {
    background: #fff;
    padding: 0 20px;

    .box-title {
      font-size: 16px;
      font-weight: normal;
      padding-left: 10px;
      line-height: 70px;
      border-bottom: 1px solid #f5f5f5;
    }

    .box-body {
      padding: 20px 0;
    }
  }
}

.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;

  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }

    > ul {
      flex: 1;
      padding: 20px;

      li {
        line-height: 30px;

        span {
          color: #999;
          margin-right: 5px;

          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }

    > a {
      color: $xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }

  .action {
    width: 420px;
    text-align: center;

    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;

      &:first-child {
        margin-right: 10px;
      }
    }
  }
}

.goods {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  .info {
    display: flex;
    text-align: left;

    img {
      width: 70px;
      height: 70px;
      margin-right: 20px;
    }

    .right {
      line-height: 24px;

      p {
        &:last-child {
          color: #999;
        }
      }
    }
  }

  tr {
    th {
      background: #f5f5f5;
      font-weight: normal;
    }

    td,
    th {
      text-align: center;
      padding: 20px;
      border-bottom: 1px solid #f5f5f5;

      &:first-child {
        border-left: 1px solid #f5f5f5;
      }

      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}

.my-btn {
  width: 228px;
  height: 50px;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 48px;
  margin-right: 25px;
  color: #666666;
  display: inline-block;

  &.active,
  &:hover {
    border-color: $xtxColor;
  }
}

.total {
  dl {
    display: flex;
    justify-content: flex-end;
    line-height: 50px;

    dt {
      i {
        display: inline-block;
        width: 2em;
      }
    }

    dd {
      width: 240px;
      text-align: right;
      padding-right: 70px;

      &.price {
        font-size: 20px;
        color: $priceColor;
      }
    }
  }
}

.submit {
  text-align: right;
  padding: 60px;
  border-top: 1px solid #f5f5f5;
}

.addressWrapper {
  max-height: 500px;
  overflow-y: auto;
}

.text {
  flex: 1;
  min-height: 90px;
  display: flex;
  align-items: center;

  &.item {
    border: 1px solid #f5f5f5;
    margin-bottom: 10px;
    cursor: pointer;

    &.active,
    &:hover {
      border-color: $xtxColor;
      background: lighten($xtxColor, 50%);
    }

    > ul {
      padding: 10px;
      font-size: 14px;
      line-height: 30px;
    }
  }
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>